<template>
    <div class="home">
        <div class="top_info">
            <div class="location">
                <img src="@/assets/images/home/location.png" alt="" />
                <span>江南</span>
            </div>
            <div class="weather">
                <img src="@/assets/images/home/weather.png" alt="" />
                <span>晴</span>
                <span>东风二级</span>
                <span>29/38℃</span>
            </div>
        </div>
        <div class="banner">
            <img src="@/assets/images/home/banner.png" alt="" />
        </div>
        <van-notice-bar left-icon="volume-o">
            重要通知：强雷电等强对流天气，请注意防范
        </van-notice-bar>
        <div class="nav">
            <div class="left" @click="goNav(1)">
                <span>江南资讯</span>
            </div>
            <div class="right" @click="goNav(2)">
                <span>我想了解</span>
            </div>
        </div>
        <div class="recommend">
            <div class="left">
                <span class="line"></span>
                <i>资讯推荐</i>
            </div>
            <van-dropdown-menu>
                <van-dropdown-item
                    v-model="value"
                    :options="option"
                    @change="changeVal(value)"
                />
            </van-dropdown-menu>
        </div>
        <div class="list">
            <ul>
                <li
                    @click="goDetail()"
                    v-for="item in zxList"
                    :key="item.jn_jnnx_id"
                >
                    <div class="left">
                        <img :src="item.tp" alt="" />
                    </div>
                    <div class="right">
                        <div class="txt">
                            <img
                                v-if="item.type == 1"
                                src="@/assets/images/home/tzgg.png"
                                alt=""
                            />
                            <img
                                v-if="item.type == 2"
                                src="@/assets/images/home/zcfg.png"
                                alt=""
                            />
                            <img
                                v-if="item.type == 4"
                                src="@/assets/images/home/nqdt.png"
                                alt=""
                            />
                            <img
                                v-if="item.type == 5"
                                src="@/assets/images/home/cmgs.png"
                                alt=""
                            />
                            <span>{{ item.nr }}</span>
                        </div>
                        <div class="info">
                            <div class="time">{{ item.create_time }}</div>
                            <div class="see">
                                <p>
                                    <img
                                        src="@/assets/images/home/see.png"
                                        alt=""
                                    />
                                    <span>{{ item.llNum }}</span>
                                </p>
                                <p>
                                    <img
                                        src="@/assets/images/home/colect.png"
                                        alt=""
                                    />
                                    <span>{{ item.scNum }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- <li @click="goDetail()">
                    <div class="left">
                        <img src="@/assets/images/home/item2.png" alt="" />
                    </div>
                    <div class="right">
                        <div class="txt">
                            <img src="@/assets/images/home/zcfg.png" alt="" />
                            <span
                                >江南镇农业农村局发布关于就业
                                补贴政策的调整公告</span
                            >
                        </div>
                        <div class="info">
                            <div class="time">2021-11-24</div>
                            <div class="see">
                                <p>
                                    <img
                                        src="@/assets/images/home/see.png"
                                        alt=""
                                    />
                                    <span>120</span>
                                </p>
                                <p>
                                    <img
                                        src="@/assets/images/home/colect.png"
                                        alt=""
                                    />
                                    <span>120</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <li @click="goDetail()">
                    <div class="left">
                        <img src="@/assets/images/home/item3.png" alt="" />
                    </div>
                    <div class="right">
                        <div class="txt">
                            <img src="@/assets/images/home/nqdt.png" alt="" />
                            <span
                                >江南镇农业农村局发布关于就业
                                补贴政策的调整公告</span
                            >
                        </div>
                        <div class="info">
                            <div class="time">2021-11-24</div>
                            <div class="see">
                                <p>
                                    <img
                                        src="@/assets/images/home/see.png"
                                        alt=""
                                    />
                                    <span>120</span>
                                </p>
                                <p>
                                    <img
                                        src="@/assets/images/home/colect.png"
                                        alt=""
                                    />
                                    <span>120</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <li @click="goDetail()">
                    <div class="left">
                        <img src="@/assets/images/home/item4.png" alt="" />
                    </div>
                    <div class="right">
                        <div class="txt">
                            <img src="@/assets/images/home/cmgs.png" alt="" />
                            <span
                                >江南镇农业农村局发布关于就业
                                补贴政策的调整公告</span
                            >
                        </div>
                        <div class="info">
                            <div class="time">2021-11-24</div>
                            <div class="see">
                                <p>
                                    <img
                                        src="@/assets/images/home/see.png"
                                        alt=""
                                    />
                                    <span>120</span>
                                </p>
                                <p>
                                    <img
                                        src="@/assets/images/home/colect.png"
                                        alt=""
                                    />
                                    <span>120</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
        <tabbar :active="0" />
    </div>
</template>

<script>
import ecenter from "../../../lib/node_modules/ecenter-core";
import { NoticeBar, DropdownMenu, DropdownItem } from "vant";
import {
    getCurrentInstance,
    getTransitionRawChildren,
    onMounted,
    ref,
} from "vue";
import tabbar from "@/components/wd-tabbar.vue";
export default {
    name: "home",
    componentName: "home",
    components: {
        tabbar,
    },
    setup() {
        const value = ref(1);
        const zxList = ref([]);
        const option = [
            { text: "智能推荐", value: 1 },
            { text: "最新发布", value: 2 },
            { text: "收藏最多", value: 3 },
            { text: "浏览最多", value: 4 },
        ];
        const changeVal = (val) => {
            console.log(val);
            getList();
        };
        const getList = () => {
            let data = {
                user_id: 1,
                type: value.value,
                role_id: 450,
            };
            ecenter.gateway
                .dispatch("/nyzx/v1.0/zlb/zxtj", { ...data })
                .then((res) => {
                    console.log(res);
                    if (res.code == 1) {
                        zxList.value = res.data.list;
                    }
                });
        };
        onMounted(() => {
            getList();
        });

        const { proxy } = getCurrentInstance();
        const goNav = (val) => {
            if (val == 1) {
                proxy.$router.push({
                    name: "jnzx",
                });
            } else {
                proxy.$router.push({
                    name: "wxlj",
                });
            }
        };
        const goDetail = () => {
            proxy.$router.push({
                name: "zxxq",
            });
        };
        return {
            value,
            option,
            goNav,
            goDetail,
            changeVal,
            zxList,
        };
    },
};
</script>

<style lang="less" scoped>
.home {
    padding-bottom: 50px;
    .top_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 10px 16px;
        .location {
            display: flex;
            align-items: center;
            img {
                width: 12px;
                height: 15px;
                margin-right: 5px;
            }
        }
        .weather {
            img {
                width: 14px;
                height: 14px;
                margin-right: 10px;
            }
            span {
                margin: 0 4px;
            }
        }
    }
    .banner {
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
        img {
            width: 100%;
            border-radius: 4px;
        }
    }
    /deep/.van-notice-bar {
        margin: 8px 16px 16px;
        height: 24px;
        box-sizing: border-box;
    }
    .nav {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 16px;
        div {
            width: 166px;
            height: 80px;
            border-radius: 5px;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            span {
                font-family: "PingFang-SC-Medium";
                font-size: 18px;
                color: #fff;
                margin-right: 20px;
            }
        }
        .left {
            background: url("../../assets/images/home/left_bg.png") no-repeat;
            background-size: 166px 80px;
        }
        .right {
            background: url("../../assets/images/home/right_bg.png") no-repeat;
            background-size: 166px 80px;
        }
    }
    .recommend {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        margin: 16px;
        margin-bottom: 0;
        background-color: rgba(66, 143, 252, 0.2);
        border-radius: 2px;
        height: 36px;
        div.left {
            display: flex;
            align-items: center;
            margin-left: 15px;
            span {
                display: inline-block;
                height: 15px;
                width: 2px;
                background-color: #428ffc;
                border-radius: 1px;
                margin-right: 5px;
            }
            i {
                font-family: "PingFang-SC-Medium";
                font-size: 16px;
                color: #363a44;
                font-style: normal;
                font-weight: 550;
            }
        }
        /deep/.van-dropdown-menu {
            .van-dropdown-menu__item {
                background-color: rgba(66, 143, 252, 0.2);
            }
            .van-dropdown-menu__bar {
                box-shadow: none;
                height: 36px;
            }
            .van-dropdown-menu__title {
                border: 1px solid #d7d8da;
                padding: 2px 0;
                text-indent: 0.5em;
                border-radius: 5px;
                width: 106px;
                font-size: 13px;
                font-family: "PingFang-SC-Regular";
                color: #363a44;
            }
            .van-dropdown-menu__title:after {
                right: 5px;
            }
        }
    }
    .list {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        padding: 15px 16px;
        ul {
            li {
                width: 343px;
                height: 90px;
                background-color: #ffffff;
                border-radius: 8px;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                padding: 16px;
                box-sizing: border-box;
                margin-bottom: 13px;
                .left {
                    img {
                        width: 92px;
                    }
                    margin-right: 10px;
                }
                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        margin: 0;
                    }
                    .txt {
                        span {
                            font-family: "PingFang-SC-Medium";
                            font-size: 12px;
                        }
                        img {
                            width: 56px;
                            vertical-align: middle;
                            margin-right: 3px;
                        }
                        margin-bottom: 16px;
                    }
                    .info {
                        display: flex;
                        width: 210px;
                        justify-content: space-between;
                        font-family: "PingFang-SC-Regular";
                        font-size: 12px;
                        color: #b3b5b9;
                        .see {
                            display: flex;
                            align-items: center;
                            p {
                                display: flex;
                                align-items: center;
                                img {
                                    width: 13px;
                                    margin-right: 3px;
                                }
                                &:first-of-type {
                                    margin-right: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
